<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/BackgroundManage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-input placeholder="请输入权限名称"
              v-model="keyword"
              class="input-with-select"
              style="width: 30%"
              clearable>
    </el-input>&nbsp;
    <el-button type="info" size="medium" icon="el-icon-search" @click="initPermissionList" round>搜索</el-button>
    <el-button type="primary" round style="position:relative;left: 46%" @click="addPermissionVisible = true">添加权限
    </el-button>
    <el-table :data="permissionList" style="width: 100%;">
      <el-table-column type="index" align="center"></el-table-column>
      <el-table-column label="权限名称" prop="name" align="center"></el-table-column>
      <el-table-column label="权限路径" prop="url" align="center"></el-table-column>
      <el-table-column label="权限类型" prop="urlType" align="center">
        <template slot-scope="scope">{{ scope.row.urlType == 1 ? '菜单权限' : '接口权限' }}</template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑权限" placement="bottom">
            <el-button type="success" size="small" icon="el-icon-edit" @click="showUpdate(scope.row)" round></el-button>
          </el-tooltip>
          &nbsp
          <el-tooltip class="item" effect="dark" content="删除权限" placement="bottom-start">
            <el-popconfirm
                confirm-button-text='好的'
                @confirm="deletePermission(scope.row.id)"
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除吗？">
              <el-button type="danger" slot="reference" size="small" icon="el-icon-delete" round></el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 29]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--添加权限-->
    <add-permission :form-visible="addPermissionVisible"
                    :add-form-visible.sync="addPermissionVisible"
                    @roleList="initPermissionList()"></add-permission>

    <!--修改权限-->
    <update-permissions :form-visible="updatePermissionVisible"
                        :form-permission="updatePermission"
                        :update-form-visible.sync="updatePermissionVisible"
                        @roleList="initPermissionList()"></update-permissions>

  </div>
</template>

<script>
export default {
  name: "MenuManage",
  components: {
    AddPermission: () => import('@/views/Background/PermissionsAndMenu/AddPermissions.vue'),
    updatePermissions: () => import('@/views/Background/PermissionsAndMenu/UpdatePermissions.vue')
  },
  data() {
    return {
      permissionList: [
        {
          id: -1,
          name: "",
          url: "",
          urlType: "",
          parentId: -1
        }
      ],
      keyword: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      //添加权限
      addPermissionVisible: false,

      //修改权限
      updatePermissionVisible: false,
      updatePermission: {
        id: -1,
        name: "",
        url: "",
        urlType: "",
        parentId: -1
      }
    }
  },
  methods: {
    initPermissionList() {
      this.$emit('upList')
      let params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      }
      this.$axios.postForm("/urlPermission/pageList", params).then(response => {
        let responseData = response.data;
        if (responseData.code == 200) {
          let pageDate = responseData.data;
          this.permissionList = pageDate.records;
          this.currentPage = pageDate.current;
          this.pageSize = pageDate.size;
          this.total = pageDate.total;
        }
      })
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.initPermissionList();
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initPermissionList();
    },

    showUpdate(permission) {
      this.updatePermissionVisible = true;
      let {id, name, url, urlType, parentId} = permission;
      this.updatePermission = {id, name, url, urlType, parentId};
    },
    //删除权限
    deletePermission(permissionId) {
      this.$axios.delete("/urlPermission/deleteById/" + permissionId)
          .then(response => {
            let responseData = response.data;
            if (responseData.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 2000
              })
              this.currentPage=1;
              this.initPermissionList();
            }
          })
    }

  },
  created() {
    this.initPermissionList();

  }
}
</script>

<style scoped>
*{
  margin: 8px;
}
</style>